<template>
	<view class="list">
		
		<view class="top">
			<view class="top-l">
				<image src="../../static/shop/订单 拷贝 4.png" mode="heightFix"></image>
				{{list.ordernumber}}
			</view><view class="top-l">
				<image src="../../static/shop/矢量智能对象(4).png" mode="heightFix"></image>
				  {{list.time}}
			</view>
		</view>
	
		<view class="middle">
			<image class="middle-l" src="../../static/shop/图层 1 (3).png" mode="widthFix"></image>
		    <view class="middle-r">
		    	<view>垃圾类型：{{list.type}}</view>
		    	<view>手机号码：{{list.num}}</view>
		    	<view>上门时间：{{list.hours}}</view>
		    </view>
			
			<view class="but" :style="list.state==='已完成'?'color: #dfdfdf; border: 1rpx solid #dfdfdf;': ''">
				{{list.state==='已完成'?"已完成": "消除预约"}}
			</view>
			<view class="state" v-if="!(list.state==='已完成')">
				{{list.state}}
			</view>
		</view>
		<!-- 地址 -->
		<view class="site">
			<image src="../../static/my/组 12.png" mode="heightFix"></image>
			<view class="site-r">
				<view class="r-t">{{list.site}}{{list.value}}</view>
				<view class="r-b">{{list.name}} {{list.num}}</view>
			</view>
		</view>
		<!-- 回收员信息 -->
		<view class="bun" v-if="list.state==='待上门'">
			<image src="../../static/my/0194b25ed70a55a801215aa019fd8b.jpg@260w_195h_1c_1e_1o_100sh.png" mode="heightFix"></image>
			<view class="bun-r">
				<view class="r-t">回收员：{{list.username}}</view>
				<view class="r-b">联系方式：{{list.usernum}}</view>
			</view>
			<view class="buns">
				拨打电话
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"make-list",
		props:{
			list:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less" scoped>
.list{
	width: 710rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
}
.top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 40rpx;
	width: 670rpx;
	margin: 0 auto;
	border-bottom: 1rpx solid #fafafa;
	.top-l{
		display: flex;
		align-items: center;
		text-align: center;
		// line-height: 24rpx;
		font-size: 24rpx;
		color: #b5b5b5;
		image{
			// display: block;
			// margin-top: 4rpx;
			height: 24rpx;
		}
	}
}
.middle{
	position: relative;
	display: flex;
	height: 110rpx;
	width: 670rpx;
	margin: 0rpx auto;
	padding-bottom: 30rpx;
	padding-top: 30rpx;
	border-bottom: 1rpx solid #f7f7f7;
}
.middle-l{
	display: block;
	width: 110rpx;
	height: 110rpx;
}
.middle-r{
	height: 110rpx;
	font-size: 24rpx;
	margin-left: 20rpx;
	font-weight: 600;
	color: #393939;
	view{
		padding: 5rpx;
		padding-top: 0;
	}
}
.but{
	position: absolute;
	right: 0;
	top: 20rpx;
	width: 120rpx;
	height: 46rpx;
	text-align: center;
	line-height: 40rpx;
	color: #86d5ad;
	border: 1rpx solid #86d5ad;
	border-radius: 50rpx;
	font-size: 24rpx
}
.state{
	position: absolute;
	right: 20rpx;
	top: 80rpx;
	color: #b7b7b7;
	font-size: 24rpx
}
.site{
	display: flex;
	height: 110rpx;
	width: 670rpx;
	margin: 0 auto;
	align-items: center;
	image{
		display: block;
		height:46rpx;
	}
}
.site-r{
	margin-left: 20rpx;
	width: 500rpx;
	.r-t{
		width: 500rpx;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-weight: 500;
	}
	.r-b{
		margin-top: 8rpx;
		font-size: 20rpx;
		color: #c6c6c6;
	}
}
.bun{
	display: flex;
	height: 110rpx;
	width: 670rpx;
	margin: 0 auto;
	align-items: center;
	border-top: 1rpx solid #fafafa;
	image{
		display: block;
		height:80rpx;
	}
}
.bun-r{
	margin-left: 20rpx;
	width: 500rpx;
	.r-t{
		// width: 500rpx;
		font-size: 22rpx;
		
		font-weight: 500;
	}
	.r-b{
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #c6c6c6;
	}
}
.buns{
	white-space: nowrap;
	margin-left: auto;
	font-size: 24rpx;
	color: #86d5ad;
}
</style>